<template>
  <div class="content-box">
      <div class="condition-box" >
          <span>商品名称&nbsp;&nbsp;</span>
          <el-input v-model="condition.goodsName" clearable placeholder="请输入名称" size="mini"></el-input>
          <span>商品类别ID&nbsp;&nbsp;</span>
          <el-input v-model="condition.categoryId" clearable placeholder="请输入ID" size="mini"></el-input>
          <template>
          <span>创建者&nbsp;&nbsp;</span>
          <el-input v-model="condition.createBy" clearable placeholder="请输入用户" size="mini"></el-input>
        </template>
          <span>创建时间&nbsp;&nbsp;</span>
            <span class="demonstration"></span>
                    <el-date-picker
                     v-model="condition.createTime"
                     type="date"
                     placeholder="选择日期时间"
                     align="right"
                     :picker-options="pickerOptions">
                    </el-date-picker>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="search1">查询</el-button>
          <el-button type="default" icon="el-icon-refresh-right" size="mini"  @click="reset">重置</el-button>
      </div>
      <div>
          <el-divider content-position="left">智慧超市</el-divider>
      </div>
      <!-- 
          data:整个表格需要展示的数据
      -->
      <el-table :data="datalist" @selection-change="handlerCelectionChange" height="calc(100% - 120px)" border size="mini"  style="width: 100%; text-align: center;">
          <el-table-column prop="id"  label="商品ID"></el-table-column>
          <el-table-column prop="goodsName"  label="商品名称"></el-table-column>
          <el-table-column prop="categoryId"  label="商品类别id"></el-table-column>
          <el-table-column prop="goodsImg"  label="商品图片"></el-table-column>
          <el-table-column prop="price"  label="商品价格" show-overflow-tooltip></el-table-column>
          <el-table-column prop="quantity"  label="库存数量"></el-table-column>
          <el-table-column prop="marketEnable"  label="上架状态"></el-table-column>
          <el-table-column prop="createTime"  label="创建时间"></el-table-column>
          <el-table-column prop="createBy"  label="创建者"></el-table-column>
          <el-table-column prop="updateBy"  label="更新者" show-overflow-tooltip></el-table-column>
      </el-table>   
  </div>
</template>
<script>
 import axios from 'axios';
export default {
  mounted() {
  // 组件加载完成后立即调用fetchData方法
        this.search();
    },
  name:'Good',
  data(){
      return{
        condition: {
        goodsName: null,
        categoryId: null,
        createBy: null,
        createTime: null
      },
      
        datalist:[],
          pickerOptions: {
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
      }
  },
  methods:{
    search() {
            axios.get('http://127.0.0.1:8081/goods/search',{
    })
      .then(response => {
        // 这里的response.data就是从接口中返回的数据
        // console.log(response.data);
        // console.log(response.data.result.records)
        // 将数据存储到Vue组件的数据中
        this.datalist=response.data;
      })
      .catch(error => {
        console.error(error);
      });
  },
      reset(){
          this.condition ={
              name:'',
          }
          this.category='',
          this.createby='',
          this.createtime='',
          this.search();
},
search1() {
  const { goodsName, categoryId, createBy, createTime } = this.condition;

  // 构造请求参数
  const params = {
    goodsName,
    categoryId,
    createBy,
    createtime: createTime
  };

  console.log(params);

  // 发送请求
  axios.post('http://127.0.0.1:8081/goods/search1', params)
    .then(response => {
      // 处理响应
      console.log(response.data);
      this.datalist=response.data;
    })
    .catch(error => {
      // 处理错误
      console.error(error);
    });
},
handlerCelectionChange(){},
changeCurrentPage(){},
changeSize(){}
  }
  }
</script>
<style scoped>
.content-box{
  width: calc(100% - 10px);
  height: 100%;
}

.condition-box{
  color: #909399;
  font-size: 12px;
}
.el-pagination{
  height: 30px;
  padding-top: 10px;
}
.el-input, .el-select{
  width: 120px;
  margin-right: 10px;
}
</style>